<template>
  <div class="tooltipWrap">
    <!-- <el-tooltip
      ref="tlp"
      effect="dark"
      :disabled="!tooltipFlag"
      :placement="placement"
      :content="text"
    >
      <p class="overFlow" @mouseenter="visibilityChange($event)">{{ text }}</p>
    </el-tooltip> -->

    <el-popover ref="tlp" :width="200" trigger="hover" :disabled="!tooltipFlag" :placement="placement" :content="text">
      <template #reference>
        <div class="overFlow" @mouseenter="visibilityChange($event)">
          {{ text }}
        </div>
      </template>
    </el-popover>
  </div>
</template>
 
<script>
export default {
  name: 'tooltipWrap',
  props: {
    text: { default: '' }, // 字符内容
    placement: { type: String, default: 'bottom-start' },
    className: { type: String, default: 'text' }, // class
  },
  data() {
    return {
      disabledTip: false,
      tooltipFlag: false,
    }
  },
  methods: {
    // tooltip的可控
    visibilityChange(event) {
      const ev = event.target
      const ev_weight = ev.scrollWidth // 文本的实际宽度
      if (this.$refs.tlp && this.$refs.tlp.$el && this.$refs.tlp.$el.parentNode && this.$refs.tlp.$el.parentNode.clientWidth) {
        const content_weight = this.$refs.tlp.$el.parentNode.clientWidth // 文本容器宽度(父节点)
        if (ev_weight > content_weight) {
          // 文本宽度 > 实际内容宽度  =》内容溢出
          this.tooltipFlag = true
        } else {
          // 否则为不溢出
          this.tooltipFlag = false
        }
      }
    },
  },
}
</script>
 
<style scoped>
.tooltipWrap {
  width: 100%;
  height: 18px;
}
.overFlow {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>